<template>
    <div class="add-center w-100 h-100">
        <el-card class="box-card-table h-100" shadow="never">
            <div slot="header" class="clearfix">
                <span class="fl">添加教案</span>
                <el-button class="fr" @click="goback" style="padding:6px;">返回</el-button>
            </div>
            <div class="h-100" v-loading="loading">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="主题名称：" prop="bTC_Name">
                        <el-input v-model="ruleForm.bTC_Name" placeholder="主题名称"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="授课人：" prop="bTID">
                                <el-select v-model="ruleForm.bTID" placeholder="请选择教师">
                                    <el-option :label="item.T_Name" :value="item.TID" v-for="item in teacherList" :key="item.TID"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="学生：" prop="bSID">
                                <el-select v-model="ruleForm.bSID" placeholder="请选择学生">
                                    <el-option :label="item.SName" :value="item.SID" v-for="item in studyList" :key="item.SID"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="授课时间：" prop="bTC_Time">
                                <el-date-picker
                                v-model="ruleForm.bTC_Time"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择日期时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="班级：" prop="bClass">
                                <el-input v-model="ruleForm.bClass" placeholder="班级名称"></el-input>
                                <!-- <el-select v-model="ruleForm.Class" placeholder="请选择班级">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select> -->
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="课时：" prop="bTC_Ks">
                                <el-input type="number" v-model="ruleForm.bTC_Ks" placeholder="课时" style="width:220px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="课型：" prop="bTC_Kx">
                                <el-input v-model="ruleForm.bTC_Kx" placeholder="课型"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="教学内容：" prop="bTC_Content">
                        <el-input
                        type="textarea"
                        class="line-height"
                        placeholder="请输入内容"
                        v-model="ruleForm.bTC_Content"
                        :autosize="{ minRows: 4}"
                        maxlength="200"
                        show-word-limit
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="教学目标：" prop="bTC_aims">
                        <el-input
                        class="line-height"
                        type="textarea"
                        placeholder="请输入内容"
                        v-model="ruleForm.bTC_aims"
                        :autosize="{ minRows: 4}"
                        maxlength="200"
                        show-word-limit
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="教具准备：" prop="bTC_Zb">
                        <el-input
                        class="line-height"
                        type="textarea"
                        placeholder="请输入内容"
                        v-model="ruleForm.bTC_Zb"
                        :autosize="{ minRows: 4}"
                        maxlength="200"
                        show-word-limit
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="" prop="bTC_Photo">
                        <el-upload
                            class="avatar-uploader"
                            :http-request="uploadFilesHandler"
                            :action="baseurl"
                            :show-file-list="false"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="ruleForm.bTC_Photo" :src="ruleForm.bTC_Photo" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    
                    <el-form-item label="教学过程：" prop="bTC_gc">
                        <quill-editor v-model="ruleForm.bTC_gc"
                            style="line-height:0px;"
                            ref="myQuillEditor"
                            :options="editorOption">
                        </quill-editor>
                    </el-form-item>
                    <el-form-item label="教学后记：" prop="bTC_Hj">
                        <el-input
                        class="line-height"
                        type="textarea"
                        placeholder="请输入内容"
                        :autosize="{ minRows: 4}"
                        v-model="ruleForm.bTC_Hj"
                        maxlength="1000"
                        show-word-limit
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item class="t-r" style="margin-top:10px;">
                        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
import elewarp from '@/components/warp-slot.vue'
import {addCenterList,editCenterList,getCenterInfo,upLoadFiles,baseurl} from '@/api/index.js'

export default {
    name: 'teaching',
    components: {
        elewarp,
        // eleAddStudy
    },
    data() {
        return {
            loading:false,
            baseurl:baseurl + '/UploadPhoto',
            ruleForm:{
                bTC_Name:'',	
                bTC_Photo:'',	
                bSID:'',	
                bClass:'',	
                bTC_Time:'',	
                bTC_Ks:'',	
                bTC_Kx:'',	
                bTID:'',	
                bTC_Content:'',	
                bTC_aims:'',	
                bTC_Zb:'',	
                bTC_gc:'',	
                bTC_Hj:'',
            },
            editorOption:{
                modules:{
                    toolbar:[
                        ["bold", "italic", "underline", "strike"],
                        ["code-block",{list: "ordered"},{list: "bullet"}],
                        [{"color":[]},{"background":[]}],
                        [{indent: "-1"},{indent: "+1"}],
                        [{align: []}],
                        ["link", "image"]
                    ]
                },
                placeholder:'请输入'
            },
            rules:{
                bTC_Name:[
                    { required: true, message: '主题名称不能为空', trigger: 'blur' },
                    {min:3,max:30,message:'长度再3-30个字符之间',trigger: 'blur'}
                ],
                bSID:[
                    { required: true, message: '请选择学生', trigger: 'change' }
                ],
                bTID:[
                    { required: true, message: '请选择老师', trigger: 'change' }
                ],
                bClass:[
                    { required: true, message: '班级不能为空', trigger: 'blur' }
                ],
                bTC_Time:[
                    { required: true, message: '时间不能为空', trigger: 'blur' }
                ]
            },
        }
    },
    computed:{
        teacherList() {
            return this.$store.state.allTeacherList;
        },
        studyList() {
            return this.$store.state.allStudyList;
        }
    },
    created(){
        this.centerid = this.$route.query.id;
        if(this.centerid) {
            this._getCenterInfo();
        }
    },
    methods:{
        submitForm(){
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let params ={
                        ...this.ruleForm
                    }
                    if(this.centerid) {
                        editCenterList({...params,bTCID:this.centerid}).then((res) => {
                            if(res) {
                                if(res.code == 200) {
                                    this.$util.tipsMsg('success','修改成功！');
                                    this.goback()
                                } else {
                                    this.$util.tipsMsg('error',res.message);
                                }
                            }
                        }).catch((err) => {

                        })
                    } else {
                        addCenterList(params).then((res) => {
                            if(res) {
                                if(res.code == 200) {
                                    this.$util.tipsMsg('success','添加成功！');
                                    this.goback()
                                } else {
                                    this.$util.tipsMsg('error',res.message);
                                }
                            }
                        }).catch((err) => {

                        })
                    }
                } else {
                    return false;
                }
            })
        },
        uploadFilesHandler(options){;
            let file = options.file
            let filename = options.file.name;
            let type = options.file.type;
            if (file) {
                var ready = new FileReader();
                ready.readAsDataURL(file);
                ready.onload = (fileReader) => {
                    let base64Str = fileReader.currentTarget.result;
                    this.loading = true
                    upLoadFiles({filebytes:base64Str,bExt:type}).then((res) => {;
                        if(res.code == 200) {
                            this.ruleForm.bTC_Photo = res.FileName;
                        } else {
                            this.$message.error(res.message);
                        }
                    }).finally (() => {
                        this.loading = false;
                    })
                
                }
            }
        },
        
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 、PNG格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        onReset(){
            this.$refs.searchform.resetFields()
        },
        _getCenterInfo(){
            getCenterInfo({bTCID:this.centerid}).then((res) => {
                if(res) {
                    console.log(res)
                    for (const key in this.ruleForm) {
                        if (this.ruleForm.hasOwnProperty(key)) {
                            let _key = key.substr(1);
                            if( _key in res) {
                                this.ruleForm[key] = res[_key];
                            }
                        }
                    }
                }
            })
        },

        // 全选
        goback(){
            this.$router.push({path:'/center/center-list'})
        }
    }
}
</script>
<style lang="less">
.add-center{
    .line-height{
        line-height: 20px;
    }
}
.add-center{
    .el-card__body{
        height:calc(100% - 70px);
    }
    .box-card-table{
        overflow-y: auto;
        box-sizing: border-box;
    }
}
</style>
